import React, { Component } from 'react'
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
// import 'swiper/swiper.min.css'
import 'swiper/css'
export default class App extends Component {
  state = {
    list: []
  }
  componentDidMount () {
    setTimeout(() => {
      this.setState({
        list: ["aaa", "bbb", "ccc"]
      })
    }, 1000)
  }
  componentDidUpdate (prevProps, prevState) {
    // 在更新完成生命周期声明swiper
    new Swiper(".swiper", {
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      // 是否循环
      loop: true
    })
  }
  render () {
    return (
      <div className="swiper" style={{ height: "100px", background: "pink" }}>
        <div className="swiper-wrapper">
          {
            this.state.list.map(item =>
              <div className="swiper-slide" key={item}>{item}</div>
            )
          }
        </div>
        {/* <!-- 如果需要分页器 --> */}
        <div className="swiper-pagination"></div>
      </div>

    )
  }
}
